<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
</head>

<body>
    <div class="comments">
        <form id="myForm">
            <h3 class="comm-head">评论</h3>
            <input class="username" name="username" type="text" value="水若寒宇" />
            <div class="comm-input">
                <textarea placeholder="爱发评论的人，运气都很棒" name="content" class="content" onkeyup="keyUp(event)"></textarea>
                <div class="foot">
                    <div class="word"></div>
                    <!-- <input type="submit" class="btn" value="发表评论"> -->
                    <button class="btn" onclick="addComment(event)">发表评论</button>
                </div>
            </div>
            <h3 class="comm-head">热门评论<sub>(0)</sub></h3>
            <ul class="comm-list">
                <!-- <li class="comm-item">
      <div class="avatar"></div>
      <div class="info">
        <p class="name vip">
          清风徐来
          <img src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />
        </p>
        <p className="time">
          <span>2012-12-12</span>
          <span class="iconfont icon-collect"></span>
          <span class="del">删除</span>
        </p>
        <p>
          这里是评论的内容！！！这里是评论的内容！！！这里是评论的内容！！！
        </p>
      </div>
    </li> -->
            </ul>
        </form>
    </div>
    <script src="./lib/jquery.js"></script>
    <script src="./lib/template-web.js"></script>

    <script type="text/html" id="temp">
        {{ each data }}
        <li class="comm-item">
            <div class="avatar"></div>
            <div class="info">
                <p class="name vip">
                    {{$value.username}}
                    <img src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />
                </p>
                <p className="time">
                    <span>{{$value.time}}</span>
                    <span class="iconfont icon-collect"></span>
                    <span class="del" id="{{$value.id}}" onclick="delComment(event)">删除</span>
                </p>
                <p>
                    {{$value.content}}
                </p>
            </div>
        </li>
        {{ /each }}
    </script>
    <script>
        //获取数据
        const baseURL = 'http://www.liulongbin.top:3006'

        getComment()

        function getComment() {
            $.get(`${baseURL}/api/cmtlist`, function (res) {
                // console.log(res);
                let result = template('temp', res)
                $('.comm-list').html(result)
                $('.comm-head>sub').text(res.data.length)

            })
        }


        function addComment(event) {
            // $('#myForm').on('submit', function (event) {
            event.preventDefault()
            const username = $('.username').val().trim()
            const content = $('.content').val().trim()
            $.ajax({
                type: 'post',
                url: `${baseURL}/api/addcmt`,
                data: {
                    username,
                    content
                },
                success(res) {
                    // console.log(res);
                    getComment()
                    $('.username').val('')
                    $('.content').val('')
                }
                // })
            })
        }


        //删除
        function delComment(event) {
            const id = $(event.target).attr('id')
            console.log(id);
            $.ajax({
                type: 'DELETE',
                url: `${baseURL}/api/delcmt?id=${id}`,
                success() {
                    getComment()
                }
            })
        }

        //回车添加
        function keyUp(event) {
            event.keyCode === 13 && addComment(event)
        }
    </script>
</body>

</html>